import React from 'react'
import {withRouter,} from 'react-router-dom'
import {connect,} from 'react-redux'
import {WingBlank} from "antd-mobile";
import './GameAIItem.css'
import ResultPipe from "../ResultPipe/ResultPipe";
import CoinIcon from "../../../../../../../res/images/web/shared/coin.png"
import LockIcon from "../../../../../../../res/images/web/game-room/lock@2x.png"
import {formatAsiaOdd, formatAsiaOddToCh} from "../../AsiaOddsTable/AsiaOddsTable";
import {formatDXQOdd} from "../../BigSmallTable/BigSmallTable";

class GameAIItem extends React.Component {

    constructor(props) {
        super(props)

    }

    buyAi = (type) => {
        const uid = localStorage.getItem('userid')
        const matchId = this.props.match.params.gameId
        this.props.history.push('../order/' + matchId + '?type=' + type, {
            aitype: type,
        })
    }

    parseFloatToPercent = float => {
        // console.log(float)
        if (float === undefined) return ''
        const to2 = float.toFixed(4)
        if (Number.isNaN(to2)) return ''
        const arr = to2.split('.')
        const floatString = arr[1]
        if (floatString === undefined) return ''
        let result = Number(floatString.slice(0, 2))
        const last = Number(floatString.slice(2, 4))
        if (last > 50) {
            result = result + 1
        } else {
            // result = result - 1
        }
        // const result = Number(to2.split('.')[1])
        return result
    }

    formatTitleAdd = (odd, title) => {
        if (title === '胜平负') return ''
        if (title === '大小球') return formatDXQOdd(odd) ? formatDXQOdd(odd) + '球' : ''
        if (title === '让球') return formatAsiaOdd(odd)
    }

    render() {


        const rateArr = this.props.AIItemData.data.rateArr ? this.props.AIItemData.data.rateArr : []
        const {
            AIItemData: {
                title,
                correct,
                type,
            },
        } = this.props
        // console.log(this.props)

        const showDate = this.formatTitleAdd(rateArr[1], title)
        const rateArrDiv = (<div
            className='ai-item-rate-arr'
            style={{
                position: 'absolute',
                right: '15px',
                left: '50%',
                transform: 'translateX(-50%)',
                display: 'flex',
                justifyContent: 'center',
            }}
        >
            <span>{rateArr ? rateArr[0] : ''}</span>
            <span>{rateArr ? rateArr[1] : ''}</span>
            <span>{rateArr ? rateArr[2] : ''}</span>
        </div>)

        if (this.props.dataEmpty) {
            const {
                AIItemData: {
                    title,
                },
            } = this.props

            return <>
                <div className='ai-item-ctn'>
                    <div className='flex flex-align-center'>
                        <span className='ai-item-title' style={{height: '36px',}}>{title}</span>
                        <span className='gray-text'>{showDate}</span>
                    </div>


                    <div className='flex-space-between-align-center' style={{height: 58}}>

                        <div style={{width: '75%',}}>
                            <ResultPipe
                                dataEmpty={this.props.dataEmpty}
                            />
                        </div>

                        <div
                            style={{
                                width: 82,
                                height: 32,
                                background: 'rgba(238,238,238,1)',
                            }}
                            className='flex-center-align-center'
                        >
                            <span className='gray-text'>暂无分析</span>
                        </div>

                    </div>

                </div>

            </>
        }

        const paid = this.props.paid

        // if (!this.props.paid) {
        //     const {
        //         AIItemData: {
        //             title,
        //             type,
        //             cost,
        //         },
        //     } = this.props
        //
        //     return <>
        //         <div className='ai-item-ctn'>
        //
        //             {rateArrDiv}
        //             <div className='flex flex-align-center'>
        //                 <span className='ai-item-title' style={{height: '36px',}}>{title}</span>
        //             </div>
        //
        //             <div className='flex-space-between-align-center'
        //                  style={{
        //                      height: '58px',
        //                  }}
        //             >
        //                 <div style={{
        //                     width: '69%',
        //                     height: '100%',
        //                     // background: 'rgba(51,51,51,0.04)',
        //                     borderRadius: '4px',
        //                     textAlign: 'center',
        //                     position: 'relative'
        //                 }} className='flex-center-align-center'>
        //                     {/*<span style={{*/}
        //                     {/*    fontSize: '14px',*/}
        //                     {/*    color: 'rgba(51,51,51,1)',*/}
        //                     {/*    lineHeight: '20px',*/}
        //                     {/*    width: '80%'*/}
        //                     {/*}}>完善注册资料， 优先体验AI大数据预测</span>*/}
        //                     <div style={{
        //                         backgroundColor: 'rgba(43,138,247,0.2)',
        //                         width: '100%',
        //                         height: '12px',
        //                         borderRadius: '10px',
        //                     }}/>
        //                     <img src={LockIcon} alt='' style={{
        //                         position: 'absolute',
        //                         left: '50%',
        //                         top: '50%',
        //                         transform: 'translate(-50%, -50%)',
        //                         width: '40px',
        //                     }}/>
        //                 </div>
        //                 <div style={{
        //                     width: '29%',
        //                     height: '100%',
        //                 }}>
        //                     <div style={{
        //                         height: '50%',
        //                         borderRadius: '4px 4px 0 0',
        //                         background: 'rgba(51,51,51,0.04)',
        //                     }} className='flex-center-align-center'>
        //                         {/*<img src={CoinIcon} alt='' />*/}
        //                         <span style={{
        //                             fontSize: '16px',
        //                             fontWeight: 'bold',
        //                             color: 'rgba(51,51,51,1)',
        //                             lineHeight: '19px',
        //                             marginLeft: '4px',
        //                         }}>¥{cost}</span>
        //                     </div>
        //                     <div
        //                         style={{
        //                             height: '50%',
        //                             borderRadius: '0 0 4px 4px',
        //                             background: '#FA7268',
        //                         }}
        //                         className='flex-center-align-center'
        //
        //                         onClick={() => this.buyAi(type)}
        //                     >
        //                         <span style={{
        //                             fontSize: '14px',
        //                             fontWeight: 600,
        //                             color: 'rgba(255,255,255,1)',
        //                             lineHeight: '20px',
        //                         }}>购买</span>
        //                     </div>
        //                 </div>
        //             </div>
        //
        //
        //         </div>
        //
        //     </>
        // }

        const cost = this.props.AIItemData.cost

        const unpaid = <>
            <div className='ai-item-ctn'>

                {/*{rateArrDiv}*/}
                <div className='flex flex-align-center'>
                    <span className='ai-item-title'>{title}</span>
                    <span className='gray-text'>{showDate}</span>
                </div>

                <div className='flex-space-between-align-center'
                     style={{
                         height: '58px',
                     }}
                >
                    <div style={{
                        width: '75%',
                        height: '100%',
                        // background: 'rgba(51,51,51,0.04)',
                        borderRadius: '4px',
                        textAlign: 'center',
                        position: 'relative'
                    }} className='flex-center-align-center'>
                        {/*<span style={{*/}
                        {/*    fontSize: '14px',*/}
                        {/*    color: 'rgba(51,51,51,1)',*/}
                        {/*    lineHeight: '20px',*/}
                        {/*    width: '80%'*/}
                        {/*}}>完善注册资料， 优先体验AI大数据预测</span>*/}
                        <div style={{
                            backgroundColor: 'rgba(238,238,238,1)',
                            width: '100%',
                            height: '12px',
                            borderRadius: '10px',
                        }}/>
                        <img src={LockIcon} alt='' style={{
                            position: 'absolute',
                            left: '50%',
                            top: '50%',
                            transform: 'translate(-50%, -50%)',
                            width: '40px',
                        }}/>
                    </div>
                    <div
                        style={{
                            width: 82,
                            height: 32,
                        }}
                        className='flex-center-align-center'
                    >
                        <div style={{
                            height: '100%',
                            width:'50%',
                            borderRadius: '4px 0px 0px 4px',
                            background: 'rgba(255,165,0,0.16)',
                        }} className='flex-center-align-center'>
                            {/*<img src={CoinIcon} alt='' />*/}
                            <span style={{
                                fontSize: '16px',
                                fontWeight: 'bold',
                                color: 'rgba(255,140,0,1)',
                                lineHeight: '19px',
                                marginLeft: '4px',
                            }}>¥{cost}</span>
                        </div>
                        <div
                            style={{
                                height: '100%',
                                width:'50%',
                                borderRadius: '0px 4px 4px 0px',
                                background: 'rgba(255,165,0,1)',
                            }}
                            className='flex-center-align-center'

                            onClick={() => this.buyAi(type)}
                        >
                                <span style={{
                                    fontSize: '14px',
                                    fontWeight: 600,
                                    color: 'rgba(255,255,255,1)',
                                    lineHeight: '20px',
                                }}>购</span>
                        </div>
                    </div>
                </div>


            </div>

        </>


        const resultCorrect = <div
            className='ai-item-result ai-item-result-correct'
        ><span>准</span></div>
        const resultFalse = <div
            className='ai-item-result ai-item-result-false'
        ><span>错</span></div>
        const resultTied = <div
            className='ai-item-result ai-item-result-zou'
        ><span>走</span></div>


        const game = this.props.currentGame
        const statusid = this.props.status || game.info.statusid
        const end = statusid === 8
        // const {statusid} = game.info
        let result
        if (correct === 1) {
            result = resultCorrect
        } else if (correct === 2) {
            result = resultFalse
        } else if (correct === 3) {
            result = resultTied
        }

        // const result = correct === 1 ?  resultCorrect : resultFalse

        const titleM = {
            1: {one: '主胜概率', three: '客胜概率',},
            2: {one: '胜', two: '平', three: '负',},
            3: {one: '大球概率', three: '小球概率',},
        }

        const normalTemplate = (
            <div style={{...this.props.ctnStyle}}>
                <div className='ai-item-ctn'>
                    {/*{rateArrDiv}*/}
                    <div className='flex flex-align-center'>
                        <span className='ai-item-title'>{title}</span>
                        <span className='gray-text'>{showDate}</span>
                    </div>
                    <div className='ai-item-result-ctn'>
                        {end ? result : null}
                    </div>

                    <ResultPipe
                        type={type}
                        title={title}
                        pipeData={{
                            one: {
                                // value: homeValue,
                                title: titleM[type].one,
                                rate: rateArr[0],
                            },
                            two: {
                                // value: tiedValue,
                                title: titleM[type].two,
                                rate: type === 2 ? rateArr[1] : 0,
                            },
                            three: {
                                // value: awayValue,
                                title: titleM[type].three,
                                rate: rateArr[2],
                            },
                        }}
                        rateArr={rateArr}
                    />F
                </div>


            </div>
        )

        if (end) return normalTemplate
        if (!end && !paid) return unpaid

        return <>
            {normalTemplate}
        </>
    }

}

const mapState = state => ({
    currentGame: state.game.currentGame,
})
const mapDispatch = dispatch => ({
    doBuyGameAi: payload => dispatch.game.doBuyGameAi(payload),
    doFetchGameAi: (payload) => dispatch.game.doFetchGameAi(payload),
})

export default connect(mapState, mapDispatch)(withRouter(GameAIItem))
